﻿@{
    ViewBag.Title = "Metering Dashboard";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section header {
    <script language="javascript">
        var currentDate = new Date();
        var month = Number(@(this.ViewBag.Month)) || (currentDate.getMonth() + 1);
        var year = Number(@(this.ViewBag.Year)) || currentDate.getFullYear();
    </script>

    <script language="javascript" src="@Url.Content("~/Scripts/cloudninja/pages/cloudninja.metering.pages.VendorDashboard.js")"></script>
}

<div class="page vendorDashboard">
    <h1 class="pageHeader">CNMB Dashboard</h1>

    @Html.Partial("DashboardNav")
    
    <script id="topDbTemplate" type="text/html">
        <tr>
            <td>${TenantId}</td>
            <td><span class="{{if Value/$item.Quota > quotaExceedingPercent}}text-at-quota{{else}}text-below-quota{{/if}}">${Value}</span>/${$item.Quota}</td>
            <td>
                <a href="/Home/TenantDashboard?tid=${TenantId}&month=${Month}&amp;year=${Year}"><img src="/Images/info-more.png" /></a>
            </td>
        </tr>
    </script>

    <div id="timePeriodContainer">
        <div class="label"></div>
    </div>
    
    <div class="clear"></div>

    <div>
        <div class="topTenantsContainer">
            <div id="gauge1" class="gaugeChart"></div>
            <div class="gaugeLabel">Database (Top 10)</div>
            <br/>

            <table>
                <thead>
                    <tr class="head">
                        <th scope="col">
                            <a href="#">Tenant</a>
                        </th>
                        <th scope="col">
                            <a href="#">Database size (kb)</a>
                        </th>
                    </tr>
                </thead>
                <tbody id="topdblist">
                    <tr>
                        <td colspan="2">loading...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="topTenantsContainer">
            <div id="gauge2" class="gaugeChart"></div>
            <div class="gaugeLabel">Storage (Top 10)</div>

            <br/>

            <table>
                <thead>
                    <tr class="head">
                        <th scope="col">
                            <a href="#">Tenant</a>
                        </th>
                        <th scope="col">
                            <a href="#">Storage Size (kb)</a>
                        </th>
                    </tr>
                </thead>
                <tbody id="topstglist">
                    <tr>
                        <td colspan="2">loading...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="topTenantsContainer">
            <div id="gauge3" class="gaugeChart"></div>
            <div class="gaugeLabel">Bandwidth (Top 10)</div>

            <br/>

            <table>
                <thead>
                    <tr class="head">
                        <th scope="col">
                            <a href="#">Tenant</a>
                        </th>
                        <th scope="col">
                            <a href="#">Bandwidth (kb)</a>
                        </th>
                    </tr>
                </thead>
                <tbody id="topbwelist">
                    <tr>
                        <td colspan="2">loading...</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="clear">
        </div>
    </div>

    <div id="chart1container" class="graphChartContainer">
        <div class="title">Web Bandwidth</div>
        <div id="chart1" class="graphChart"></div>

        <span class="blue legendItem">Ingress</span>
        <span class="violet legendItem">Egress</span>
    </div>

    <div id="chart2container" class="graphChartContainer">
        <div class="title">Database Bandwidth</div>
        <div id="chart2" class="graphChart"></div>

        <span class="blue legendItem">Ingress</span>
        <span class="violet legendItem">Egress</span>
    </div>

    <div id="chart3container" class="graphChartContainer">
        <div class="title">Average Database Size</div>
        <div id="chart3" class="graphChart"></div>
    </div>

    <div id="chart4container" class="graphChartContainer">
        <div class="title">Average Storage Size</div>
        <div id="chart4" class="graphChart"></div>
    </div>
</div>
